<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>函数式组件</title>
</head>

<body>
    <div id="test"></div>
</body>

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<script type="text/babel">

    
    function sum(...n) {
        return n.reduce((n1, n2) => {
            return n1 + n2
        })
    }

    console.log(sum(1,2,3,4,5));


    const VDOM = (
        <div>
        <h1>this is react page...!</h1>
        <button onClick={btnClick1}>BTN</button>

        <div className="box">
            <input type="text" placeholder="点击获取数据" />
        </div>
    </div>
    )

    // function handleClick2() {
    //     // let ipt1 = this.refs.ipt1
    //     // console.log(ipt1.value);
    // }
    // function handleClick3(){
    //     // let ipt2 = this.refs.ipt2
    //     // console.log(ipt2.value);
    // }

    function btnClick1() {
        console.log('click...')
    }
    // ReactDOM.render(VDOM, document.getElementById('test'))

    ReactDOM.createRoot(document.getElementById('test')).render(VDOM);

</script>
</html>